<template>
  <div>
    <cus-modal
      ref="modal"
      title="为食谱原料绑定主副食商品名称"
      @on-visible-change="onVisibleChange"
      :width="step == 1 ? '750' : '1500'"
      @onOk="onOk"
      okBtnName="开始/重新匹配"
      cancelBtnName="关闭"
    >
      <Spin fix v-if="loading"></Spin>
      <div class="contentBox">
        <div class="contentBox-left">
          <div style="width:586px">
            <Form ref="formValidate" :model="form">
              <FormItem
                label=""
                prop="mealMaterialName"
                style="margin-right:20px"
                :label-width="0"
              >
                <Input
                  v-model="form.mealMaterialName"
                  maxlength="20"
                  clearable
                  placeholder="请输入食谱原料名"
                  style="width: 200px"
                >
                </Input>
              </FormItem>
              <FormItem
                label="类型:"
                prop="type"
                :label-width="60"
                style="margin-right:20px"
              >
                <Select
                  v-model="form.type"
                  style="width: 200px"
                  placeholder="请选择类型"
                  clearable
                >
                  <Option :value="0">全部</Option>
                  <Option :value="1">已匹配</Option>
                  <Option :value="2">未匹配</Option>
                </Select>
              </FormItem>
              <cusButton
                class="mr_20"
                type="primary"
                @onClick="
                  pages.page = 1;
                  selectMealFoodOrPurchaseFoodMatchingApi();
                "
                >查询</cusButton
              >
            </Form>
          </div>
          <div>
            <Table
              border
              :loading="loading"
              :columns="columns"
              :data="data"
              height="500"
            >
              <template slot-scope="{ row }" slot="materialName">
                <div
                  class="namebox"
                  @click="selectLeftBtn(row)"
                  :class="
                    selectItem && selectItem.materialId == row.materialId
                      ? 'selecteft'
                      : ''
                  "
                >
                  {{ row.materialName }}
                </div>
              </template>
              <template slot-scope="{ row }" slot="productName">
                <div class="slotBox" v-if="row.foodProductMatchingList.length">
                  <div
                    class="slotBox-item"
                    v-for="(item, idx) in row.foodProductMatchingList"
                    :key="idx"
                    :class="{
                      noBorderB: idx + 1 == row.foodProductMatchingList.length
                    }"
                  >
                    {{ item.productMaterialName }}
                  </div>
                </div>
              </template>
              <template slot-scope="{ row }" slot="supplyStatus">
                <div class="slotBox" v-if="row.foodProductMatchingList.length">
                  <div
                    class="slotBox-item"
                    v-for="(item, idx) in row.foodProductMatchingList"
                    :key="idx"
                    :class="{
                      noBorderB: idx + 1 == row.foodProductMatchingList.length
                    }"
                  >
                    {{ item.supplyStatus == 0 ? "未供应" : "供应" }}
                  </div>
                </div>
              </template>
              <template slot-scope="{ row }" slot="price">
                <div class="slotBox" v-if="row.foodProductMatchingList.length">
                  <div
                    class="slotBox-item"
                    v-for="(item, idx) in row.foodProductMatchingList"
                    :key="idx"
                    :class="{
                      noBorderB: idx + 1 == row.foodProductMatchingList.length
                    }"
                  >
                    <div v-if="item.price">
                      {{ item.price ? item.price : 0 }}元/{{
                        item.specification ? item.specification : "公斤"
                      }}
                    </div>
                  </div>
                </div>
              </template>
              <template slot-scope="{ row }" slot="priority">
                <div class="slotBox" v-if="row.foodProductMatchingList.length">
                  <div
                    class="slotBox-item"
                    v-for="(item, idx) in row.foodProductMatchingList"
                    :key="idx"
                    :class="{
                      noBorderB: idx + 1 == row.foodProductMatchingList.length
                    }"
                  >
                    <div v-if="item.priority == 0">
                      <Checkbox
                        v-model="item.priority"
                        :true-value="1"
                        :false-value="0"
                        @on-change="
                          value => {
                            changePriority(item);
                          }
                        "
                        >优先</Checkbox
                      >
                    </div>
                    <div
                      v-else
                      style="color:green;padding-right:6px;display:flex;align-items:center"
                    >
                      <Icon
                        type="md-checkbox"
                        color="green"
                        size="20"
                        style="margin-right:2px"
                      />优先
                    </div>
                  </div>
                </div>
              </template>
              <template slot-scope="{ row }" slot="operation">
                <div class="slotBox" v-if="row.foodProductMatchingList.length">
                  <div
                    class="slotBox-item"
                    v-for="(item, idx) in row.foodProductMatchingList"
                    :key="idx"
                    :class="{
                      noBorderB: idx + 1 == row.foodProductMatchingList.length
                    }"
                  >
                    <Poptip
                      confirm
                      transfer
                      placement="left"
                      :title="`是否确认取消匹配？`"
                      @on-ok="cancelBind(item)"
                    >
                      <div style="color: orange;cursor:pointer">取消匹配</div>
                    </Poptip>
                  </div>
                </div>
              </template>
            </Table>
            <div style="width: 100%;text-align:right;">
              <cus-page
                :data="pages"
                class="mt_10"
                @pageChange="selectMealFoodOrPurchaseFoodMatchingApi()"
                :showSizer="false"
                :showElevator="false"
              ></cus-page>
            </div>
          </div>
        </div>
        <div class="contentBox-center" v-if="step == 2">
          <div>
            <div style="text-align:center;margin-bottom:5px">食谱原料名称</div>
            <div class="chooseItem">
              {{ selectItem ? selectItem.materialName : "" }}
            </div>
            <div
              style="text-align:center;transform:rotate(90deg);padding: 10px 0"
            >
              <Icon type="md-infinite" size="20" />
            </div>
            <div class="chooseItem">
              {{ selectRightItem ? selectRightItem.materialName : "" }}
            </div>
            <div style="text-align:center;margin-top:5px">商品名</div>
            <div style="margin-top:20px;text-align:center">
              <Checkbox v-model="single">是否首选</Checkbox>
            </div>
            <div style="margin-top:20px;text-align:center">
              <Button type="primary" @click="goCheck()">匹配确认</Button>
            </div>
          </div>
        </div>
        <div class="contentBox-right" v-if="step == 2">
          <div style="width:310px">
            <Form ref="formValidate" :model="form">
              <FormItem label="" prop="materialName" :label-width="0">
                <Input
                  v-model="form.materialName"
                  maxlength="20"
                  clearable
                  placeholder="请输入商品名"
                  style="width: 200px"
                >
                </Input>
              </FormItem>
              <cusButton
                class="mr_20"
                type="primary"
                @onClick="
                  pages2.page = 1;
                  selectProductMaterialListApi();
                "
                >查询</cusButton
              >
            </Form>
          </div>
          <div>
            <Table
              border
              width="550"
              :loading="loading2"
              :columns="columns2"
              :data="data2"
              height="500"
            >
              <template slot-scope="{ row }" slot="materialName">
                <div
                  class="namebox"
                  @click="selectRightItem = row"
                  :class="
                    selectRightItem &&
                    selectRightItem.materialId == row.materialId
                      ? 'selecteft'
                      : ''
                  "
                >
                  {{ row.materialName }}
                </div>
              </template>
              <template slot-scope="{ row }" slot="materialStatus">
                <div v-if="row.materialStatus == 1">
                  <Icon
                    type="md-checkbox"
                    color="green"
                    size="20"
                    style="margin-right:2px"
                  />供应
                </div>
                <div v-else>
                  <Icon
                    type="md-checkbox"
                    color="gray"
                    size="20"
                    style="margin-right:2px"
                  />未供应
                </div>
              </template>
            </Table>
            <div style="width: 100%;text-align:right;">
              <cus-page
                :data="pages2"
                class="mt_10"
                @pageChange="selectProductMaterialListApi()"
                :showSizer="false"
                :showElevator="false"
                :simple="true"
              ></cus-page>
            </div>
          </div>
        </div>
      </div>
    </cus-modal>
  </div>
</template>

<script>
import {
  selectMealFoodOrPurchaseFoodMatching,
  selectProductMaterialList,
  saveFoodProductMatching,
  deleteFoodProductMatchingPriority,
  updateFoodProductMatchingPriority
} from "@/api/business/dishesModule";

const form = {
  type: 0, // 匹配类型
  mealMaterialName: "", // 食谱原料名
  materialName: "" // 商品名称
};

export default {
  data() {
    return {
      form: form,
      ruleValidate: {},
      loading: false,
      loading2: false,
      materialTypeList: [],
      specificationList: [],
      foodRuleTypeList: [],
      columns: [
        {
          title: "食谱原料名称",
          slot: "materialName",
          align: "center"
        },
        {
          title: "商品名",
          slot: "productName",
          width: 180,
          align: "center"
        },
        {
          title: "供应状态",
          slot: "supplyStatus",
          align: "center"
        },
        {
          title: "价格",
          slot: "price",
          align: "center"
        },
        {
          title: "优先匹配",
          slot: "priority",
          align: "center"
        },
        {
          title: "操作",
          fixed: "right",
          slot: "operation",
          align: "center"
        }
      ],
      columns2: [
        {
          title: "商品名称",
          slot: "materialName",
          align: "center"
        },
        {
          title: "是否供应",
          slot: "materialStatus",
          align: "center"
        }
      ],
      data: [],
      data2: [],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      pages2: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      selectItem: null,
      selectRightItem: null,
      step: 1,
      single: false
    };
  },
  mounted() {
    this.form = this.$cu.deepClone(form);
  },
  methods: {
    onVisibleChange(v) {
      if (!v) {
        this.form = this.$cu.deepClone(form);
        this.selectItem = null;
        this.selectRightItem = null;
        this.step = 1;
        this.single = false;
      }
    },
    show() {
      this.$refs["modal"].show = true;
      this.selectMealFoodOrPurchaseFoodMatchingApi();
    },
    onOk() {
      if (this.step == 1) {
        this.step = 2;
      }
      this.selectProductMaterialListApi();
    },
    // 规格变更
    changeSpecification(value) {
      console.log("value---" + value);
      if (value == 0) {
        this.form.unitWeight = 1;
      }
      if (value == 1) {
        this.form.unitWeight = 0.5;
      }
    },
    // 左侧选中
    selectLeftBtn(row) {
      this.selectItem = row;
      this.form.materialName = row.materialName;
      this.pages2.page = 1;
      this.selectRightItem = null;
      this.selectProductMaterialListApi();
    },
    // 待绑定食材列表
    selectMealFoodOrPurchaseFoodMatchingApi() {
      this.loading = true;
      return new Promise(resolve => {
        selectMealFoodOrPurchaseFoodMatching({
          type: this.form.type,
          mealMaterialName: this.form.mealMaterialName,
          current: this.pages.page,
          size: this.pages.pageSize
        }).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.data = res.data;
            this.pages.pageTotal = res.total;
            resolve();
          }
        });
      });
    },
    // 商品列表
    selectProductMaterialListApi() {
      this.selectRightItem = null;
      this.loading2 = true;
      return new Promise(resolve => {
        selectProductMaterialList({
          materialName: this.form.materialName,
          current: this.pages2.page,
          size: this.pages2.pageSize
        }).then(res => {
          this.loading2 = false;
          if (res.retCode === 2000) {
            this.data2 = res.data;
            this.pages2.pageTotal = res.total;
            resolve();
          }
        });
      });
    },
    // 匹配确认
    goCheck() {
      if (!this.selectItem) {
        this.$Message.warning("请先选择您要匹配的食谱原料");
        return;
      }
      if (!this.selectRightItem) {
        this.$Message.warning("请先选择您要匹配的商品");
        return;
      }
      this.saveFoodProductMatchingApi();
    },
    // 绑定
    saveFoodProductMatchingApi() {
      this.loading = true;
      return new Promise(resolve => {
        saveFoodProductMatching({
          foodProductMatchingId: this.selectItem.foodProductMatchingId,
          mealMaterialId: this.selectItem.materialId,
          mealMaterialName: this.selectItem.materialName,
          priority: this.single ? 1 : 0,
          productMaterialId: this.selectRightItem.materialId,
          productMaterialName: this.selectRightItem.materialName
        }).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.$Message.success("匹配成功.");
            this.selectMealFoodOrPurchaseFoodMatchingApi();
            this.selectProductMaterialListApi();
            resolve();
          }
        });
      });
    },
    // 取消匹配
    cancelBind(item) {
      this.loading = true;
      return new Promise(resolve => {
        deleteFoodProductMatchingPriority({
          foodProductMatchingId: item.foodProductMatchingId
        }).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.$Message.success("已取消匹配.");
            this.selectMealFoodOrPurchaseFoodMatchingApi();
            resolve();
          }
        });
      });
    },
    // 更改优先级
    changePriority(item) {
      return new Promise(resolve => {
        updateFoodProductMatchingPriority({
          mealMaterialId: item.mealMaterialId,
          foodProductMatchingId: item.foodProductMatchingId,
          supplyStatus: item.supplyStatus
        }).then(res => {
          if (res.retCode === 2000) {
            this.$Message.success("匹配优先级更换成功.");
            this.selectMealFoodOrPurchaseFoodMatchingApi();
            resolve();
          } else {
            item.priority = 0;
          }
        });
      });
    }
  }
};
</script>

<style scoped>
/deep/.ivu-select-multiple .ivu-select-selection .ivu-select-placeholder {
  /* height: 40px !important; */
  height: auto !important;
  line-height: 40px !important;
}
/deep/.ivu-select-selection {
  height: auto !important;
  min-height: 40px !important;
  border-radius: 2px !important;
}
/deep/.ivu-table-cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/deep/.ivu-table td {
  position: relative !important;
}
</style>

<style scoped lang="less">
.contentBox {
  display: flex;
  justify-content: space-between;
  &-left {
    // width: 586px;
  }
  &-center {
    display: flex;
    align-items: center;
    padding: 0 40px;
  }
}

.slotBox {
  width: 100%;
  // padding: 5px 0;
  &-item {
    padding: 10px 0;
    border-bottom: 1px solid #e3e8ee;
    min-height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.noBorderB {
  border-bottom: none !important;
}

.namebox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2px solid white;
  cursor: pointer;
}

.selecteft {
  color: #1890ff;
  background: #e5f6ff;
  border-left: 2px solid #1890ff;
}

.chooseItem {
  line-height: 22px;
  padding: 4px 8px;
  border: 1px solid #e3e8ee;
  border-radius: 3px;
  background: white;
  text-align: center;
  word-break: break-all;
  font-size: 12px;
  width: 120px;
  min-height: 32px;
}
::v-deep .ivu-table-wrapper-with-border {
  width: 670px;
}
</style>
